<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:include="common/head :: head">
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <link rel="shortcut icon" th:href="@{/static/favicon.ico}">-->
<!--    <link th:href="@{/static/css/bootstrap.min.css?v=3.3.7}" rel="stylesheet">-->
<!--    <link th:href="@{/static/css/font-awesome.css?v=4.4.0}" rel="stylesheet">-->

<!--    &lt;!&ndash; Data Tables &ndash;&gt;-->
<!--    <link th:href="@{/static/css/plugins/dataTables/dataTables.bootstrap.css}" rel="stylesheet">-->

<!--    <link th:href="@{/static/css/animate.css}" rel="stylesheet">-->
<!--    <link th:href="@{/static/css/style.css?v=4.1.0}" rel="stylesheet">-->

<!--    &lt;!&ndash; 全局js &ndash;&gt;-->
<!--    <script th:src="@{/static/js/jquery.min.js?v=2.1.4}"></script>-->
<!--    <script th:src="@{/static/js/bootstrap.min.js?v=3.3.7}"></script>-->
<!--    <script th:src="@{/static/js/plugins/jeditable/jquery.jeditable.js}"></script>-->
<!--    &lt;!&ndash; Data Tables &ndash;&gt;-->
<!--    <script th:src="@{/static/js/plugins/dataTables/jquery.dataTables.js}"></script>-->
<!--    <script th:src="@{/static/js/plugins/dataTables/dataTables.bootstrap.js}"></script>-->

<!--    &lt;!&ndash;弹出层js&ndash;&gt;-->
<!--    <script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>-->
<!--    <script th:src="@{/static/js/myLayer.js}"></script>-->

</head>
<body class="gray-bg">
<form id="ec" th:action="@{/role}" method="post">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <table class="table form-table margin-bottom10">
                        <tr>
                            <td>
                                <input type="text" name="roleName" th:value="${#maps.containsKey(filters, 'roleName')} ? ${filters.roleName} : ''" placeholder="角色名称" class="input-sm form-control"/>
                            </td>
                        </tr>
                    </table>
                    <div>
                        <button type="button" class="btn btn-sm btn-primary" onclick="javascript:document.forms.ec.pageNum.value=1;document.forms.ec.submit();">搜索</button>
                        <button type="button" class="btn btn-sm btn-primary create" sec:authorize="hasAuthority('role.create')">添加用户</button>
                        <button type="button" id="loading-example-btn" onclick="javascript:window.location.reload();" class="btn btn-white btn-sm">刷新</button>
                    </div>
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th class="text-center">序号</th>
                            <th class="text-center">角色名称</th>
                            <th class="text-center">角色编码</th>
                            <th class="text-center">描述</th>
                            <th class="text-center">创建时间</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="gradeX" th:each="item,it : ${page.list}">
                            <td class="text-center" th:text="${it.count}">11</td>
                            <td class="text-center" th:text="${item.roleName}">22</td>
                            <td class="text-center" th:text="${item.roleCode}">33</td>
                            <td class="text-center" th:text="${item.description}">33</td>
                            <td class="text-center" th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}" >33</td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-primary update" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.edit')">修改</button>
                                <button type="button" class="btn btn-sm btn-danger delete" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.delete')">删除</button>
                                <button type="button" class="btn btn-sm btn-upload assign" th:attr="data-id=${item.id}" sec:authorize="hasAuthority('role.assgin')">分配权限</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="row" th:include="common/pagination :: pagination"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
</body>
<script th:inline="javascript">
    $(function(){
        $(".alert").on("click",function () {
            opt.alert("测试alert")
        });
        $(".load").on("click",function () {
            opt.load();
        });
        $(".delete").on("click",function(){
            let id = $(this).attr("data-id");
            opt.confirm("/role/delete/"+id,"确认要删除吗?");
        });
        $(".dialog").on("click",function () {
            opt.dialog("测试提示框",1);
        });
        $(".update").on("click",function () {
            let id = $(this).attr("data-id");
            opt.openWin("/role/edit/" + id,"修改信息",580,430);
        });
        $(".assign").on("click",function () {
            var id = $(this).attr("data-id");
            opt.openWin("/role/assignShow/"+id,'修改',580,430);
        });
    });
</script>
<script type="text/javascript">
    $(".create").on("click",function () {
        opt.openWin('/role/create','添加用户',630,430)
    });

</script>
</html>